<template>
  <div class="constructionProceduresManage-container page-common-layout">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            @conditionChange="selectGroupChange($event)"
            :key="queryInfo.key"
          >
            <template slot="space_1">
              <a-input
                placeholder="请输入区位"
                v-model.trim="queryInfo.workArea"
                allowClear
              >
              </a-input>
              <a-select
                placeholder="请选择项目类型"
                v-model="queryInfo.engType"
                allowClear
                showSearch
                :filter-option="filterOption"
                @change="search()"
              >
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in projectTypeSoucre"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
              <a-select
                placeholder="请选择立项类型"
                allowClear
                showSearch
                v-model="queryInfo.type"
                :filter-option="filterOption"
                @change="search()"
              >
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="item in typeSource"
                  :key="item.dicItemCode"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
            </template>
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="hazard-body-container">
      <div class="operate"></div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="tenantName" title="项目名称"> </vxe-column>
          <vxe-column field="workArea" title="区位"> </vxe-column>
          <vxe-column field="engTypeDesc" title="项目类型"> </vxe-column>
          <vxe-column field="investmentScale" title="投资规模"> </vxe-column>
          <vxe-column field="constructionUnit" title="建设单位"> </vxe-column>
          <vxe-column field="typeDesc" title="立项类型"> </vxe-column>
          <vxe-column field="createTime" title="创建时间"> </vxe-column>
          <vxe-column field="responsiblePerson" title="负责人"> </vxe-column>
          <vxe-column title="已验收/总验收(项)">
            <template #default="{ row }">
              {{ row.accepted }}/{{ row.total }}
            </template>
          </vxe-column>
          <vxe-column field="operate" width="100" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-tooltip>
                  <template slot="title"> 上传 </template>
                  <a-icon
                    type="upload"
                    class="month-icon"
                    @click="handelUpload(row)"
                  />
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    查看
                  </template>
                  <a-icon type="file-search" @click="gotoDetail(row)" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 文件上传 -->
    <uploadFilesPage
      :key="uploadFilesPage.key"
      :visible.sync="uploadFilesPage.visible"
      :parameter="uploadFilesPage.soucre"
      :title="uploadFilesPage.title"
      :isView="uploadFilesPage.isView"
    >
    </uploadFilesPage>
  </div>
</template>

<script>
//验收报告
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import AssociativeSelectGroup from "@/components/extendCustom/AssociativeSelectGroup";
//文件上传
import uploadFilesPage from "./components/uploadFilesPage.vue";
import { pageConstruction } from "@/api/safetyManage";
import { getDicItemByCode } from "@/api/common.js";
export default {
  components: {
    ScreenConditions,
    AssociativeSelectGroup,
    uploadFilesPage,
  },
  data() {
    return {
      selectMap: [
        //项目
        {
          type: "proCode",
          mode: "default",
          placeholder: "请选择项目",
          allowClear: true,
        },
      ],
      conditionsData: {},
      queryInfo: {
        key: "query",
        //项目类型
        engType: undefined,
        //区位
        workArea: "",
        //立项类型
        type: undefined,
      },
      //项目类型
      projectTypeSoucre: [],
      //立项类型
      typeSource: [],
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //文件上传
      uploadFilesPage: {
        visible: false,
        key: "upload",
        soucre: {},
        title: "",
        isView: false,
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    reset() {
      this.queryInfo.engType = undefined;
      this.queryInfo.workArea = "";
      this.queryInfo.type = undefined;
      this.queryInfo.key = Date.now();
    },

    getData() {
      Promise.all([this.getProjectData(), this.getTypeData()]);
    },

    //查询项目类型
    getProjectData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "engineeringType" })
          .then((res) => {
            let { data } = res;
            this.projectTypeSoucre = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectTypeSoucre = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询立项类型
    getTypeData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "projectApprovalType" })
          .then((res) => {
            let { data } = res;
            this.typeSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.typeSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.pager.page = 1;
      this.getTableData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { proCode } = this.conditionsData;
      let { engType = "", workArea, type = "" } = this.queryInfo;
      pageConstruction({
        page,
        pageSize,
        tenantCode: proCode,
        engType,
        workArea,
        type,
      })
        .then((res) => {
          this.tableData = res?.rows || [];
          this.pager.total = res?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //上传
    handelUpload(row) {
      this.uploadFilesPage.visible = true;
      this.uploadFilesPage.key = Date.now();
      this.uploadFilesPage.title = "专项验收";
      this.uploadFilesPage.soucre = row;
      this.uploadFilesPage.isView = false;
    },

    //详情
    gotoDetail(row) {
      this.uploadFilesPage.visible = true;
      this.uploadFilesPage.key = Date.now();
      this.uploadFilesPage.title = "查看";
      this.uploadFilesPage.soucre = row;
      this.uploadFilesPage.isView = true;
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.constructionProceduresManage-container {
  display: flex;
  flex-direction: column;
  .hazard-body-container {
    flex: 1;
    background-color: @base-bg-color;
    flex-shrink: 0;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .main {
      flex: 1;

      .text-button-group {
        .month-icon {
          color: #a07df1;
        }
      }
    }
    .pager-container {
      flex-shrink: 0;
      box-sizing: border-box;
    }
  }
}
</style>
